<template>
	<div>
		<ul class="top-nav">
			<li @click="change(1)">
				<router-link :class="minecolor" to="/mine">我的</router-link>
			</li>
			<li @click="change(2)">
				<router-link :class="foundcolor" exact to="/">发现</router-link>
			</li>
			<li @click="change(3)">
				<router-link :class="videocolor" to="/video">视频</router-link>
			</li>


		</ul>

	</div>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				minecolor: "",
				foundcolor: 'color',
				videocolor: ""
			}
		},
		created() {
			this.getpath()
		},
		methods: {
			getpath() {
				var path = {
					'/': 2,
					'/mine': 1,
					'/video': 3
				}
				this.change(path[this.$route.path])
			},
			//改变字体颜色
			change(a) {
				if (a == 1) {
					this.minecolor = 'color'
					this.foundcolor = ''
					this.videocolor = ''
				} else if (a == 2) {
					this.minecolor = ''
					this.foundcolor = 'color'
					this.videocolor = ''
				} else if (a == 3) {
					this.minecolor = ''
					this.foundcolor = ''
					this.videocolor = 'color'
				}


			}
		}
	}
</script>

<style>
	.color {
		color: #555 !important;
	}

	.top-nav {
		display: flex;

		margin: 0px auto;


	}

	li {
		flex: 1;
		text-align: center;

		height: 20px;
		line-height: 1;

	}

	a {
		display: block;
		color: white;
	}
</style>
